<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-11 21:42:49
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:21:55
-->
<template>
  <div class="AdAN_box">
    <div class="AdAN_box_header">
      <i class="el-icon-menu"/>
      新增公告
    </div>
    <el-page-header
      class="AdAN_goBack"
      @back="$router.go(-1)"
    />
    <el-form
      class="AdAN_noticeForm"
      ref="noticeForm"
      :model="noticeForm"
      :rules="noticeRules"
      label-width="60px"
    >
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="noticeForm.title"
          tabindex="1"
        />
      </el-form-item>
      <el-form-item label="内容" prop="notice">
        <el-input
          v-model="noticeForm.notice"
          tabindex="2"
          type="textarea"
          :autosize="{ minRows: 10 }"
        />
      </el-form-item>
    </el-form>
    <el-button
      class="AdAN_addButton"
      type="primary"
      @click="handleAddNotice"
    >
      创建公告
    </el-button>
  </div>
</template>

<script>
import {
  adminAddNotice
} from '@/api/admin/adminNotice'

export default {
  data() {
    return {
      noticeForm: {
        title: '',
        notice: ''
      },
      noticeRules: {
        title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
        notice: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleAddNotice() {
      this.$refs.noticeForm.validate(valid => {
        if (valid) {
          const input = {};
          input.title = this.noticeForm.title;
          input.notice = this.noticeForm.notice;
          adminAddNotice(input).then(() => {
            this.$message.success('创建成功');
            this.$router.push({ name: 'AdminPublishNotice' });
          });
        } else {
          console.error('error submit!!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss">
.AdAN_box {
  background: #FFFFFF;
  display: inline-block;
  width: calc(100% - 100px);
  min-width: 600px;
  margin: 50px 50px 0px 50px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.2);

  .AdAN_box_header {
    background: #EEE;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #DDD;
  }

  .AdAN_goBack {
    margin: 10px;
  }

  .AdAN_noticeForm {
    width: 80%;
    margin: 50px auto 0px auto;
  }

  .AdAN_addButton {
    position: relative;
    left: calc(50% - min(100px, 10%));
    width: calc(min(200px, 20%));
    margin: 50px 0px 50px 0px;
  }
}

</style>
